<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>


<div id="doumee">

	<div class="swiper-container Main" id="Main">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				
				<div class="top-banner">
					<img src="image/top-banner.png" />
					<div class="info">
						<span class="total">已有{{total}}人瓜分1000万装修津贴</span>
						<img src="image/top-banner-2.png" />
					</div>
				</div>
				
				<div class="mod-1 mod-box">
					<p class="top"></p>
					<div class="wrapper">
						<div class="box">
							<h3 class="bt-1">活动一</h3>
							<h5 class="intro-1 tc">志邦家居20周年狂欢季，全国寻找1000名业主瓜分1000万装修津贴，每人一万</h5>
							<h3 class="bt-1">活动二</h3>
							<h5 class="intro-1 tc">如果您身边的小伙伴有装修需求，分享给TA，还能获得万份好礼</h5>
						</div>
					</div>
				</div>
				
				<div class="btn-box-2">
					<a class="btn" @click="showFillInfo = !showFillInfo">瓜分1000万</a>
					<a class="btn" @click="showGift = !showGift">分享赢好礼</a>
				</div>
				
				<div class="mod-2 mod-box">
					<p class="top"></p>
					<div class="wrapper">
						<div class="box">
							<h3 class="bt-2 tc">
								<span><b>分享活动，赢万份好礼</b></span>
							</h3>
							
							<ul class="activeMod">
								<li class="act-1"></li>
								<li class="act-2"></li>
								<li class="act-box">
									
									<div class="swiper-container" id="friendMod">
										<div class="swiper-wrapper">
											<div class="swiper-slide nowrap tc" v-for="item in shareRes">{{item.name}} 分享成功获得 <span class="import">{{item.res}}</span></div>
										</div>
									</div>
									
								</li>
							</ul>
							
							<div class="dm-clearfix friendMod">
								<h5 class="dm-left">您已邀请<span class="import h4">{{friend.length}}</span>位好友</h5>
								<h5 class="dm-right" @click="showFriend = !showFriend">查看已邀请好友</h5>
							</div>
							
							<a class="inviteBtn btn">邀请好友领取礼包</a>
							
							<h3 class="bt-2 tc">
								<span><b>兑换礼品</b></span>
							</h3>
							
							<div class="goodMod dm-clearfix">
								<ul class="list dm-left" v-for="(item,index) in goods">
									<li class="photo cover" data-rate="1">
										<img :src="item.photo" />
										<h6 class="name nowrap">{{item.name}}</h6>
									</li>
									<li class="btn h6 buy" @click="exchane(index)" v-if="item.exchange == 0">兑换</li>
									<li class="btn h6 buy disabled" v-if="item.exchange == 1">已兑换</li>
								</ul>
							</div>
							
							<h5 style="color: #8a6162;margin-left: 12px;margin-bottom: 15px;">注：上述商品仅能兑换一个</h5>
							
							<h5 class="intro-bt">分享规则</h5>
							
							<h5 class="intro-2">
								1、有8人通过您分享的链接，成功参与活动，即可免费领取价值199元保温杯。<br /><br />
								2、有15人通过您分享的链接，成功参与活动，即可免费领取价值299元进口保温壶。<br /><br />
								3、有25人通过您分享的链接，成功参与活动，即可免费领取价值399元不锈钢垃圾桶。
							</h5>
							
						</div>
					</div>
				</div>
				
				<div class="activityDtl">
					<h3 class="bt">活动详情</h3>
					<div class="box">
						1. 志邦家居20周年狂欢季，凡在12月25日-1月25日期间，成功报名，即可瓜分1000万装修津贴。<br /> 
						2. 如没有装修需求，参与转发活动的用户，完成相对应的邀请任务，即可获得相对应的礼品。我们将会在活动结束后两周内统一邮寄活动奖品，请耐心等待。<br />
						3. 10000元装修津贴包含：订单礼+设计津贴+定制津贴等等，具体内容可在个人中心查看。如有疑问可电话咨询客服电话：0551-65218340.<br />
						4. 如发现活动参与者有不正当手段，主办方有权在事先不知情的情况下取消参与活动资格。
					</div>
				</div>
				
			</div>
		</div>
	</div>
	
	<!--填信息领津贴-->
	<div class="zbMask-1" v-show="showFillInfo">
		<div class="dm-mask"></div>
		<div class="zbMaskMod">
			<a class="close-btn" @click="showFillInfo = !showFillInfo"></a>
			<h3 class="bt-2 tc">
				<span><b>填信息领津贴</b></span>
			</h3>
			
			<form action="" class="myForm">
				<input type="text" class="nor" name="tel" placeholder="请输入手机号" />
				<div class="flex-row code-mod">
					<input type="text" class="flex-full" placeholder="请输入验证码" />
					<button type="button" class="code-btn">获取验证码</button>
				</div>
			</form>
			
			<a class="btn zb-btn" @click="showFillInfo = !showFillInfo">提交领取津贴</a>
		</div>
	</div>
	<!--填信息领津贴-->
	
	<!--万元装修大礼包-->
	<div class="zbMask-1" v-show="showGift">
		<div class="dm-mask"></div>
		<div class="zbMaskMod">
			<a class="close-btn" @click="showGift = !showGift"></a>
			<h3 class="bt-2 tc">
				<span><b>万元装修大礼包</b></span>
			</h3>
			<h6 class="t1 tc">津贴领取后将会有客服人员联系并指导使用</h6>
			<h5 class="intro-3">
				1. 899元麦饭石锅具厨柜签单礼<br />
				2. 1980元美旅旅行箱(衣柜/全屋产品实付满1万元赠送）<br />
				3. 1121元设计礼包<br />
				4. 1000元电器抵用券(购买正价电器套餐产品）<br />
				5. 1000元净水器券(购买正价指定款3M净水器）<br />
				6. 2000元全屋定制抵用券(用于购买正价衣柜全屋定制满2万元可使用）<br />
				7. 1000元水槽券(购买正价电器套餐产品)<br />
				8. 1000元收纳抵扣券(购买正价收纳产品)
			</h5>
			
			<a class="btn zb-btn">告诉好友</a>
		</div>
	</div>
	<!--万元装修大礼包 end-->
	
	<!--兑换礼品-->
	<div class="zbMask-1" v-show="showExchange">
		<div class="dm-mask"></div>
		<div class="zbMaskMod">
			<a class="close-btn" @click="showExchange = !showExchange"></a>
			<h3 class="bt-2 tc">
				<span><b>兑换礼品</b></span>
			</h3>
			
			<dl class="flex-row giftMod">
				<dt class="photo cover">
					<img :src="exchangeGood.photo" />
				</dt>
				<dd class="name nowrap">{{exchangeGood.name}}</dd>
			</dl>
			
			<form action="" class="myForm">
				<input type="text" class="nor" name='userName' placeholder="请输入姓名" />
				<input type="text" class="nor" name="tel" placeholder="请输入手机号" />
				<input type="text" class="nor" name="tel" placeholder="请输入省市区" />
				<input type="text" class="nor" name="tel" placeholder="请填写详细地址" />
				<h6 class="t2">注:我们将会在活动结束后的两周内统一邮寄</h6>
			</form>
			
			<a class="btn zb-btn" @click="enterExchange">确认兑换</a>
		</div>
	</div>
	<!--兑换礼品 end-->
	
	<!--查看邀请好友-->
	<div class="zbMask-1" v-show="showFriend">
		<div class="dm-mask"></div>
		<div class="zbMaskMod">
			<a class="close-btn" @click="showFriend = !showFriend"></a>
			<h3 class="bt-2 tc">
				<span><b>已邀请好友</b></span>
			</h3>
			
			<!--无好友-->
			<template v-if="friend.length == 0">
				<div class="nof-icon">
					<img src="image/nof-icon.png" />
				</div>
				<h5 class="nof-txt tc">暂未邀请好友</h5>
			</template>
			<!--有好友-->
			<template v-if="friend.length > 0">
				
				<div class="friendBox">
					<ul class="list flex-row" v-for="item in friend">
						<li class="photo cover">
							<img :src="item.photo" />
						</li>
						<li class="name flex-full">{{item.name}}</li>
						<li class="type">
							<span class="type-1" v-if="item.type == 0">未领取</span>
							<span class="type-2" v-if="item.type == 1">已领取</span>
						</li>
					</ul>
				</div>
				
			</template>
			
			<a class="btn zb-btn" v-if="friend.length == 0">立即邀请</a>
		</div>
	</div>
	<!--查看邀请好友 end-->
	
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#doumee',
		data:{
			total:100,
			shareRes:[
				{name:'张**',res:'保温杯1'},
				{name:'王**',res:'保温杯2'},
				{name:'李**',res:'保温杯3'},
				{name:'陈**',res:'保温杯4'},
				{name:'郑**',res:'保温杯5'},
				{name:'孙**',res:'保温杯6'},
				{name:'唐**',res:'保温杯7'}
			],
			friend:[
				{name:'曹伟',photo:'image/test/good-2.jpg',type:1},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:1},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:1},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:0},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:0},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:0},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:0},
				{name:'曹伟',photo:'image/test/good-2.jpg',type:0}
			],
			goods:[
				{id:101,photo:'image/test/good-1.jpg',name:'保温杯',exchange:0},
				{id:102,photo:'image/test/good-2.jpg',name:'保温杯',exchange:0},
				{id:103,photo:'image/test/good-3.jpg',name:'不锈钢垃圾桶',exchange:0}
			],
			showFillInfo:false,
			showGift:false,
			showExchange:false,
			showFriend:false,
			exchangeGood:'',
		},
		methods:{
			//分享奖励一览
			setResPre:function(){
				new Swiper('#friendMod',{
					direction:'vertical',
					slidesPerView: 4,
					loop:true,
					autoplay: {
						delay: 1000,//1秒切换一次
						disableOnInteraction: false,
					},
				})
			},
			//兑换
			exchane:function(index){
				this.exchangeGood = this.goods[index];
				this.showExchange = true;
			},
			//确认兑换
			enterExchange:function(){
				for(var i=0;i<this.goods.length;i++){
					if(this.exchangeGood.id == this.goods[i].id){
						this.goods[i].exchange = 1;
						this.showExchange = false;
					};
				};
			},
		},
		created:function(){
			doumee.imgRate();
		},
		mounted:function(){
			dmAlert('已瓜分完，下次再来吧',{
				type:1,
				enter:'我知道了'
			});
			//初始化滑动组件
			doumee.init('#Main');
			this.setResPre();
		},
	});
	
</script>

</body>
</html>
